<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-navbar :is-back="false" title="我的工作" back-icon-color='#333333' height="50" :border-bottom="false">
		</u-navbar>
		<swiper :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="true" indicator-active-color="#fff">
			<swiper-item>
				<image src="../../static/tupian108.png" mode="widthFix" style="width: 100%;"> </image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/tupian108.png" mode="widthFix" style="width: 100%;"> </image>
			</swiper-item>
		</swiper>
		<view class="imageList">
			<view class="per_logo" v-for="(item,index) in logo_list" :key="index"
				@click="$toLink(item.path?item.path:'',{id:1})">
				<view class="box">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<text>{{item.text}}</text>
			</view>
			<view class="blank" style="width: 100%; height: 25rpx;">
			</view>
		</view>
		<view class="schedule">
			<text></text>
			<text>我的课表</text>
			<text>当前日期9\12</text>
			<text>星期三</text>
			<text>第12周</text>
		</view>
		<view class="list">
			<!-- 每周 -->
			<view class="week">
				<view class="per_day" v-for="(item,index) in weekList" :key="index">
					<text>{{item.name}}</text>
					<text></text>
				</view>
			</view>
			<!-- 学生课程表 -->
			<view class="curriculum" v-for="(item,index) in class_arr" :key="index"
				:style="{height:count_height(class_arr[index].children.length)}">
				<view class="left_curriculum">
					<view class="" v-for="(w,s) in class_arr[index].children" :key="s">
						<text>{{w.subject_name}}</text>
					</view>
				</view>
				<view class="right_curriculum">
					<view class="period" v-for="(i,j) in class_arr[index].children" :key="j">
						<view class="" v-for="(m,n) in subject_list" :key="n">
							<text>{{render_data(i.id,m)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show">
			<view class="wrap">
				<view class="rect" @tap.stop>
					<view id="icon">
						<view class="notice" @click="$toLink('../release_notice/release_notice',{})">
							<image src="../../static/tupian16.png" mode="widthFix"></image>
							<text>发布通知</text>
						</view>
						<view id="dynamic">
							<image src="../../static/tupian16.png" mode="widthFix"></image>
							<text>发布动态</text>
						</view>
						<view id="email" @click="$toLink('../compose_email/compose_email',{})">
							<image src="../../static/tupian17.png" mode="widthFix"></image>
							<text>发布邮件</text>
						</view>
						<view id="course" @click="$toLink('../add_course/add_course',{})">
							<image src="../../static/tupian23.png" mode="widthFix"></image>
							<text>发送课件</text>
						</view>
						<view id="upload" @click="$toLink('../upload_photos/upload_photos',{})">
							<image src="../../static/tupian45.png" mode="widthFix"></image>
							<text>上传图片</text>
						</view>
						<image src="../../static/tupian146.png" mode="widthFix" id="del" @click.stop="hide"></image>
						<view class="hump">
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-tabbar :list="list" active-color="#2491FE" :mid-button="true" @change="changeIndex"></u-tabbar>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import request from '../../request.js'
	export default {
		data() {
			return {
				week_list: [], //周列表
				class_arr: [], //班级列表
				subject_list: [], //用来记录数据
				show: false,
				logo_list: [{
						url: '../../static/tupian71.png',
						text: '邮件管理',
						path: '../email/email'
					},
					{
						url: '../../static/tupian57.png',
						text: '文件管理',
						path: '../file_management/file_management'
					},
					{
						url: '../../static/tupian69.png',
						text: '校园相册',
						path: '../campus_album/campus_album'
					},
					{
						url: '../../static/tupian67.png',
						text: '校内会议',
						path: '../school_meeting/school_meeting'
					},
					{
						url: '../../static/tupian35.png',
						text: '教师用车',
						path: '../teacher_car/teacher_car'
					},
					{
						url: '../../static/tupian13.png',
						text: '报修管理',
						path: '../maintenance/maintenance'
					},
					{
						url: '../../static/tupian55.png',
						text: '学校通知',
						path: '../school_notification/school_notification'
					},
					{
						url: '../../static/tupian41.png',
						text: '学生请假',
						path: '../request_absence/request_absence'
					},
					{
						url: '../../static/tupian39.png',
						text: '流程审批',
						path: '../approval_flow/approval_flow'
					},
					{
						url: '../../static/tupian53.png',
						text: '通讯录',
						path: '../contacts/contacts'
					},
					{
						url: '../../static/tupian59.png',
						text: '我的班级',
						path: '../my_class/my_class'
					},
					{
						url: '../../static/tupian63.png',
						text: '我的课组',
						path: '../research_group/research_group'
					},
					{
						url: '../../static/tupian37.png',
						text: '课程申报',
						path: '../declare_course/declare_course'
					},
					{
						url: '../../static/tupian65.png',
						text: '物品管理',
						path: '../inventory_management/inventory_management'
					},
					{
						url: '../../static/tupian49.png',
						text: '社团报名',
						path: '../sign_club/sign_club'
					},
					{
						url: '../../static/tupian29.png',
						text: '功能室',
						path: '../function_room/function_room'
					}
				],
			}
		},
		onLoad() {
			this.intervalLists();
			this.weekLists();
			this.classesCourse(); //获取的是课程
		},
		computed: {
			...mapState(['list']),
			weekList() {
				if (this.week_list) {
					this.week_list.unshift({
						name: '老师',
						week_id: ''
					})
					return this.week_list;
				} else {
					return [];
				}
			},
		},
		methods: {
			changeIndex(e) {
				console.log(e);
				switch (e) {
					case 2:
						this.show = !this.show;

				}
			},
			hide() {
				this.show = !this.show;
			},
			//计算高度
			count_height(param) {
				let num = '';
				switch (param) {
					case 1:
						num = (71 * param);
						num = `${num}rpx`;
						break;
					case 3:
						num = (71 * param) - 2;
						num = `${num}rpx`;
						break;
					case 4:
						num = (71 * param) - 3;
						num = `${num}rpx`;
						break;
					case 5:
						num = (71 * param) - 4;
						num = `${num}rpx`;
						break;
				}
				return num;
			},
			//距离顶部的高度
			margin_height(param) {
				let num = '';
				switch (param) {
					case 1:
						num = 22;
						num = `${num}rpx`;
						break;
					case 3:
						num = 119;
						num = `${num}rpx`;
						break;
					case 4:
						num = 190;
						num = `${num}rpx`;
						break;
					case 5:
						num = 190;
						num = `${num}rpx`;
						break;
				}
				return num;
			},
			//渲染数据到页面
			render_data(param1, param2) {
				let arr = [];
				let str = '';
				if (param2.children.length > 0) {
					arr = param2.children;
					for (let i = 0; i < arr.length; i++) {
						if (param1 == arr[i].id) {
							str = arr[i].name;
						} else {
							str = '';
						}
					}
				} else {
					str = '';
				}
				return str;
			},
			//获取的是具体的科目
			classesCourse() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/course/teacherCourse',
					method: 'post',
					data: {
						classes_id: this.classId ? this.classId : 15
					},
					success(res) {
						if (res.statusCode == 200) {
							let arr = [];
							console.log(res.data.data);
							arr = res.data.data;
							console.log(_this.week_list);
							console.log(_this.subject_list);
							for (let i = 0; i < _this.subject_list.length; i++) {
								for (let j = 0; j < arr.length; j++) {
									if (_this.subject_list[i].id == arr[j].week_id) {
										_this.subject_list[i].children.push({
											id: arr[j].interval_id,
											name: arr[j].subject_info ? arr[j].subject_info.name : '',
										})
									}
								}
							}
							console.log(_this.subject_list);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}
					}
				})
			},
			//获取科目
			intervalLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'management/interval/lists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							let study_arr = res.data.data;
							let norepeat_arr = [];
							console.log(res.data.data);
							let arr = study_arr.map(item => {
								return item.section;
							})
							norepeat_arr = [...new Set(arr)];
							console.log(norepeat_arr);
							norepeat_arr.forEach(item => {
								_this.class_arr.push({
									name: item,
									children: [],
								})
							})

							console.log(_this.class_arr);
							for (let i = 0; i < _this.class_arr.length; i++) {
								for (let j = 0; j < study_arr.length; j++) {
									if (_this.class_arr[i].name == study_arr[j].section) {
										_this.class_arr[i].children.push({
											id: study_arr[j].interval_id,
											subject_name: study_arr[j].name,
										})
									}
								}

							}
							console.log(_this.class_arr); //这里面获取的是课程列表
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取的是周
			weekLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'management/week/lists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							let arr = [];
							arr = res.data.data;
							_this.week_list = res.data.data;
							console.log(_this.week_list);
							console.log(arr, '触发了吗这行代码');
							for (let i = 0; i < arr.length; i++) {
								_this.subject_list.push({
									id: arr[i].week_id,
									children: []
								})
							}
							console.log(_this.subject_list);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
		}

	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background-color: #F2F2F2;
		overflow: hidden;

		.imageList {
			margin-top: 20rpx;
			width: 710rpx;
			margin-left: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.per_logo {
				width: 120rpx;
				height: 142rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				&:nth-child(1) {
					margin-left: 30rpx;
				}

				&:nth-child(2) {
					margin-left: 55rpx;
				}

				&:nth-child(3) {
					margin-left: 55rpx;
				}

				&:nth-child(4) {
					margin-left: 55rpx;
				}

				&:nth-child(5) {
					margin-left: 30rpx;
				}

				&:nth-child(6) {
					margin-left: 55rpx;
				}

				&:nth-child(7) {
					margin-left: 55rpx;
				}

				&:nth-child(8) {
					margin-left: 55rpx;
				}

				&:nth-child(9) {
					margin-left: 30rpx;
				}

				&:nth-child(10) {
					margin-left: 55rpx;
				}

				&:nth-child(11) {
					margin-left: 55rpx;
				}

				&:nth-child(12) {
					margin-left: 55rpx;
				}

				&:nth-child(13) {
					margin-left: 30rpx;
				}

				&:nth-child(14) {
					margin-left: 55rpx;
				}

				&:nth-child(15) {
					margin-left: 55rpx;
				}

				&:nth-child(16) {
					margin-left: 55rpx;
				}

				.box {
					width: 45rpx;
					margin-top: 34rpx;
					height: 90rpx;

					image {
						width: 45rpx;
					}
				}

				text {
					margin-top: 10rpx;

					&:nth-child(2) {
						font-size: 28rpx;
						color: #333333;
					}
				}

			}


		}

		.schedule {
			width: 100%;
			height: 94rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			text {
				&:nth-child(1) {
					width: 8rpx;
					height: 40rpx;
					background-color: #218FFE;
					border-radius: 8rpx;
					margin-left: 20rpx;
				}

				&:nth-child(2) {
					color: #333333;
					font-size: 30rpx;
					margin-left: 20rpx;
				}

				&:nth-child(3) {
					margin-left: 20rpx;
					font-size: 20rpx;
					color: #333333;
				}

				&:nth-child(4) {
					margin-left: 20rpx;
					font-size: 20rpx;
					color: #268efe;
				}

				&:nth-child(5) {
					margin-left: 20rpx;
					font-size: 20rpx;
					color: #268efe;
				}
			}
		}

		.list {
			width: 100%;
			background: #fff;

			.week {
				width: 100%;
				height: 110rpx;
				display: flex;
				justify-content: flex-start;

				.per_day {
					height: 110rpx;
					box-sizing: border-box;
					background: #F2F6FA;
					border-right: 1rpx solid #ccc;

					&:nth-child(n+1) {
						width: 94rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						text {
							&:nth-child(1) {
								width: 100%;
								height: 32rpx;
								font-size: 30rpx;
								color: #333333;
								text-align: center;
								margin-top: 18rpx;
							}

							&:nth-child(2) {
								width: 100%;
								margin-top: 2rpx;
								text-align: center;
								font-size: 24rpx;
								color: #666666;
								height: 26rpx;
							}
						}

					}

					&:nth-child(1) {
						width: 90rpx;
						border-right: none;
						display: flex;
						justify-content: center;

						text {
							&:nth-child(1) {
								margin-top: 35rpx !important;
								color: #268efe;
								font-size: 30rpx;
							}
						}
					}

					&:nth-child(3) {
						background: #a0bcf2;

						text {
							&:nth-child(1) {
								color: #fff;
							}

							&:nth-child(2) {
								color: #fff;
							}

						}
					}

					&:last-child {
						border-right: none;
					}
				}
			}

			.curriculum {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				border-bottom: 1rpx solid #ccc;

				.left_curriculum {
					width: 90rpx;
					view{
						width: 90rpx;
						height: 71rpx;
						background: #F2F6FA;
						text-align: center;
						overflow:hidden;
						line-height: 71rpx;
						border-bottom: 1rpx solid #ccc;
						
						text {
							&:nth-child(1) {
								color: #666666;
								font-size: 24rpx;
							}
						}
					}
				}

				.right_curriculum {
					width: 660rpx;

					.period {
						width: 100%;
						height: 71rpx;
						border-bottom: 1rpx solid #ccc;
						display: flex;
						justify-content: flex-start;

						view {
							width: 94rpx;
							height: 71rpx;
							box-sizing: border-box;
							border-right: 1rpx solid #ccc;
							display: flex;
							justify-content: flex-start;

							text {
								&:nth-child(1) {
									width: 93rpx;
									height: 71rpx;
									text-align: center;
									line-height: 71rpx;
									font-size: 26rpx;
									color: #333333;
								}
							}

							&:last-child {
								border-right: none;
							}

						}

						#mondayFirstPeriod {
							background: #fec566;
							border-bottom-left-radius: 12rpx;
							border-bottom-right-radius: 12rpx;
						}

						#tuesdayFirstPeriod {
							background: #ff586c;
							border-bottom-left-radius: 12rpx;
							border-bottom-right-radius: 12rpx;

							text {
								&:nth-child(1) {
									color: #fff;
								}
							}
						}

					}
				}

			}
		}

		.wrap {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100%;

			.rect {
				margin-bottom: 150rpx;
				width: 710rpx;
				height: 377rpx;
				border-radius: 20rpx;

				#icon {
					height: 357rpx;
					background: #fff;
					width: 100%;
					border-radius: 20rpx;
					position: relative;

					.hump {
						width: 220rpx;
						height: 120rpx;
						position: absolute;
						left: 245rpx;
						top: 248rpx;
						background: #fff;
						border-radius: 50%;
					}

					.notice {
						width: 130rpx;
						height: 105rpx;
						left: 77rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#dynamic {
						width: 130rpx;
						height: 105rpx;
						left: 291rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#email {
						width: 130rpx;
						height: 105rpx;
						left: 505rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 45rpx;
								margin-top: 5rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 25rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#course {
						width: 130rpx;
						height: 105rpx;
						left: 140rpx;
						top: 180rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#upload {
						width: 130rpx;
						height: 105rpx;
						left: 440rpx;
						top: 180rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#del {
						width: 51rpx;
						position: absolute;
						z-index: 1000;
						left: 330rpx;
						top: 305rpx;
					}

				}

			}
		}
	}
</style>
